<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>异清轩博客</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="/login-starter/js/login.js"></script>
    <link rel="stylesheet" href="/login-starter/css/style.css">
    <style>
        .header >img{
            width:100%;
            height:auto;
            max-width:100%;
            max-height:100%;
            object-fit: cover;
            border-radius: 3px;
        }
        .demo-image__preview{
            position: absolute;
            margin-top: -70px;
            margin-left: 30px;
        }
        .name span{
            font-weight: 800;
            font-size: 26px;
            padding-left: 200px;
            padding-bottom: 20px;
        }
        .name h6{
            color: #8590A6;
            padding-left: 200px;
            padding-top: 20px;
            padding-bottom: 10px;
        }
        .aside{
            width: 200px;
            margin-left: 100px;
            padding-top: 110px;
        }
        #context1{
            width: 1000px;
            background-color: white;
            margin-left: 300px;
            margin-top: -112px;
            padding-bottom: 20px;
        }
        #context3{
            width: 1000px;
            background-color: white;
            margin-left: 200px;
            margin-top: -124px;
            padding-top: 20px;
            padding-bottom: 20px;
            font-size: 20px;
        }
        #item1{
            display: none;
        }

        #item3{
            display: none;
        }
        #item4{
            display: none;
        }
        .blue{
            height: 10px;
            background-color: #409eff;
            color: red;
            font-size: 5px;
        }

    </style>
</head>
<body>
<div id="app" style="width: 100%;background-color: #F0F0F2;">
    <login @logined="onLogin" style="margin-top: 40px"></login>
    <div class="header" style=" height: 200px;">
        <img src="images/background.jpg">
        <div style="width: 100%;height: 100px;background-color: white;margin-top: -7px">
            <div class="demo-image__preview" v-for="fit in fits" :key="fit">
                <el-image
                        style="width: 150px; height: 150px;border-radius: 150px"
                        v-if="user.image"
                        :src="user.image"
                        :fit="fit">
                </el-image>
            </div>
            <div class="name">
                <span v-model="user.username">{{user.username}}</span>
                <h6>{{user.createTime}}入站</h6>
            </div>
        </div>
    </div>
    <div class="aside">
        <el-menu
                default-active="1"
                class="el-menu-vertical-demo">
            <el-menu-item index="1">
                <div @click="showDiv1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">概览</span>
                </div>
            </el-menu-item>
        </el-menu>
    </div>
    <div id="context1" style="display: block">
        <div>
            <el-form :label-position="labelPosition" label-width="110px">
                <el-form-item label="昵称：">
                    <span v-model="user.username">{{user.username}}</span>
                </el-form-item>
                <el-form-item label="描述：">
                    <span v-model="user.userId">本站第{{user.userId}}号会员</span>
                </el-form-item>
                <el-form-item label="真实姓名：">
                    <span v-model="user.name">{{user.name}}</span>
                </el-form-item>
                <el-form-item label="邮箱地址：">
                    <span v-model="user.email">{{user.email}}</span>
                </el-form-item>
                <el-form-item label="用户积分：">
                    <span v-model="user.score">{{user.score}}</span>
                </el-form-item>
                <el-form-item  label="签到日历：">
                    <el-calendar  v-model="value">
                        <template
                                slot="dateCell"
                                slot-scope="{date, data}">
                            <div>
                                <el-row>
                                    <el-col :span="10">
                                        <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}
                                        </div>
                                        <div class="blue" v-if="dealMyDate(data.day)">已签到</div>
                                    </el-col>
                                </el-row>
                            </div>
                        </template>
                    </el-calendar>
                    <el-button style="float: right;margin-right: 50px;width: 800px" type="primary"
                               v-if="onSign" @click="addSignTime()">今日签到</el-button>
                    <el-button v-else style="float: right;margin-right: 50px;width: 800px"
                               type="info" disabled="false">今日已签到</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div style="height: 100px;background-color: #F0F0F2"></div>
</div>

<script>
    var v=new Vue({
        el:"#app",
        data:{
            labelPosition: 'right',
            user:{},
            fits: [ 'cover'],
            radio: '1',
            errors:{},
            level:{need:0,grade:""},
            value: new Date(),
            signIn:{},
            sign:{uid:"",intime:""},
            favorite:{uid:"",name:""},
            favorites:{},
            fid:1,
            newDate:{},
            onSign:true,
            concern:{},
            collectedArticle:{},
            favoriteWin:false,
            activeName:'1'
        },
        created(){
        },
        methods:{
            onLogin(user){
                this.user=user;
                console.log(this.user)
                this.$forceUpdate();
                this.queryInTime(this.user.userId);
                this.verifyDate();
            },
            queryInTime(uid){
                axios.post("/yjh-user/yjh-user/signIn/queryInTime",uid).then(res=>{
                    this.signIn=res.data.data;
                })
            },
            addSignTime(){
                this.sign.uid=this.user.userId;
                axios.post("/yjh-user/yjh-user/signIn/addSignTime",this.sign).then(res=>{
                    this.$message(res.data.msg);
                    this.verifyDate();
                    this.updateUser();
                });
            },
            updateUser(){
                axios.post("/yjh-user/yjh-user/signIn/updateUser",this.user)
            },
            dealMyDate(v) {
                let res = "";
                for(let i=0; i<this.signIn.length; i++){
                    if(this.signIn[i].intime.substring(0,10) === v) {
                        res = true;
                        break
                    }
                }
                return res
            },
            verifyDate(){
                axios.post("/yjh-user/yjh-user/signIn/orderBy",this.user.userId).then(res=>{
                    this.newDate=res.data.data[0];
                    let t1=this.newDate.intime.substring(0,10);
                    let t2=this.getNowTime().substring(0,10);
                    console.log(t2==t1)
                    if (t2==t1){
                        this.onSign=false;
                    }
                });
            },
            // showLoginWin(){
            //     this.$refs.lg.openLoginWin();
            // },
            // showRegisterWin(){
            //     this.$refs.lg.openRegisterWin();
            // },
            handleAvatarSuccess(res,file){
                if (res.code){
                    this.user.head=res.data;
                    this.$forceUpdate();
                }else {
                    this.$alert(res.msg);
                }
            },
            beforeAvatarUpload(file){
                const isJPG=file.type.indexOf('image')==0;
                const isLt2M=file.size/1024/1024<2;
                if (!isJPG){
                    this.$message.error('只能上传图片格式');
                }
                if (!isLt2M){
                    this.$message.error('不能超过2MB');
                }
                return isLt2M && isJPG;
            },
            updateByAll(){
                axios.post("/myblog/user/updateByAll",this.user).then(res=>{
                    if(res.data.code==1){
                        console.log(this.user);
                        this.$message(res.data.msg);
                        location.reload();
                    }else{
                        console.info(res.data.data);
                        this.errors={};
                        for(let name in this.user) {
                            let errMsg = res.data.data
                                .filter(err => err.field == name)
                                .map(err => err.defaultMessage)
                                .join(",");
                            this.errors[name] = errMsg;
                        }
                    }
                })

            },
            getNowTime(){
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();
                var time = year + '-' + this.addZero(month) + '-' + this.addZero(day) + ' ' + this.addZero(hour) + ':' + this.addZero(minute) + ':' + this.addZero(second);
                return time;
            },
            addZero(s) {
                return s < 10 ? ('0' + s) : s;
            },
            showItem1(){
                document.getElementById("item1").style.display="block";
            },
            hiddenItem1(){
                document.getElementById("item1").style.display="none";
            },
            showItem3(){
                document.getElementById("item3").style.display="block";
            },
            hiddenItem3(){
                document.getElementById("item3").style.display="none";
            },
            showItem4(){
                document.getElementById("item4").style.display="block";
            },
            hiddenItem4(){
                document.getElementById("item4").style.display="none";
            },
            showDiv1(){
                document.getElementById("context1").style.display="block";
                document.getElementById("context2").style.display="none";
                document.getElementById("context3").style.display="none";
                document.getElementById("context4").style.display="none";
            },
            showDiv3(){
                document.getElementById("context1").style.display="none";
                document.getElementById("context2").style.display="none";
                document.getElementById("context3").style.display="block";
                document.getElementById("context4").style.display="none";
            },
        }
    });
</script>
</body>
</html>